<template>
  <div class="artist_list_contaner padd100">
    <el-row :gutter="20">
      <el-col :lg="4">
        <div style="overflow:hidden">
          <el-menu class="el-menu-vertical-demo" default-active="1-0">
            <el-sub-menu :index="index + 1" v-for="(item,index) in leftMenu" :key="item.id">
              <template #title>
                <span>{{item.fatherText}}</span>
              </template>
              <el-menu-item :index="index + 1 + '-' + indexs" v-for="(items,indexs) in item.sonText" :key="items.id"
                @click="menuClick(e,items)">
                <!-- <div class="menu_left">
                  <img :src="items.imgUrl" alt="">
                </div> -->
                <div class="menu_right">
                  {{items.title}}
                </div>
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </div>
      </el-col>
      <el-col :lg="20">
        <div class="right_artist_container">
          <div class="singer_wrapper">
            <div class="desc_title">热门歌手</div>
            <div class="filter_wrap">
              <span>筛选:</span>
              <el-radio-group v-model="radio1" size="small" @change="handleChangeRadio">
                <el-radio-button v-for="(item,index) in radioFilterItem" :key="index" :label="item.value">
                  {{item.label}}
                </el-radio-button>
              </el-radio-group>
            </div>
            <el-row :gutter="20" v-loading="loading" element-loading-text="正在玩命加载...">
              <el-col :lg="3" :sm="6" :md="6" :xs="12" style="margin-bottom:20px" v-for="(item,index) in singerData"
                :key="item.id">
                <Singer :id="item.id" :picUrl="item.picUrl  + '?param=296y150'" :name="item.name" :userid="item.accountId"/>
              </el-col>
            </el-row>
            <div v-if="showload" style="display: flex;justify-content: center;margin-top: 20px;">
              <el-button @click="handleClickLoadMore" type="primary" v-show="!loading">加载更多</el-button>
            </div>
            <div style="display: flex;justify-content: center;margin-top: 20px;"  v-else>
              <span  v-show="!loading" style="font-size:14px;color:#999">-------- 我也是有底线的😓--------</span>
            </div>
          </div>
          <!-- <div class="pageination_center" style="margin-top:40px">
            <el-pagination background layout="prev, pager, next" :total="1000" />
          </div> -->
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, onUnmounted } from "vue"
import { Headset, Plus, Timer, VideoPlay, Comment, FolderAdd, Pointer, PriceTag, House, Sunny, Guide, MostlyCloudy, UserFilled } from '@element-plus/icons-vue'
import MusicHead from "@/components/MusicHead/index";
import { getArtistList } from "@/api/index";
import Singer from "@/components/Singer";
import router from "@/router";
const radio1 = ref('-1')
const pageNum = ref<number>(1)
const limit = ref<number>(32)
const total = ref<number>(0)
const singerData = ref<any[]>([])
const loading = ref<boolean>(false)
const initial = ref<string>('')
// 目前左侧导航所选中的请求数据
const areaData = ref<number | null>(-1)
const typeData = ref<number | null>(-1)
const catData = ref<number | null>(null)
const showload = ref(true)
const radioFilterItem = reactive([{
  label: '热门',
  value: '-1'
}, {
  label: 'A',
  value: 'a'
}, {
  label: 'B',
  value: 'b'
}, {
  label: 'C',
  value: 'c'
}, {
  label: 'D',
  value: 'd'
}, {
  label: 'E',
  value: 'e'
}, {
  label: 'F',
  value: 'f'
}, {
  label: 'G',
  value: 'g'
}, {
  label: 'H',
  value: 'h'
}, {
  label: 'I',
  value: 'i'
}, {
  label: 'J',
  value: 'j'
}, {
  label: 'K',
  value: 'k'
}, {
  label: 'L',
  value: 'l'
}, {
  label: 'M',
  value: 'm'
},
{
  label: 'N',
  value: 'n'
}, {
  label: 'O',
  value: 'o'
}, {
  label: 'P',
  value: 'p'
}, {
  label: 'Q',
  value: 'q'
}, {
  label: 'R',
  value: 'r'
}, {
  label: 'S',
  value: 's'
}, {
  label: 'T',
  value: 't'
}, {
  label: 'U',
  value: 'u'
}, {
  label: 'V',
  value: 'v'
}, {
  label: 'W',
  value: 'w'
}, {
  label: 'X',
  value: 'x'
}, {
  label: 'Y',
  value: 'y'
}, {
  label: 'Z',
  value: 'z'
},
{
  label: '其他',
  value: '#'
},])
interface leftMenu {
  id: number,
  fatherText: string,
  sonText: Array<any>
}
const leftMenu: Array<leftMenu> = reactive([
  {
    id: 1,
    fatherText: '推荐',
    sonText:
      [{
        id: 11,
        title: '推荐歌手',
        type: -1,
        area: -1,
        cat: null
      },
      {
        id: 12,
        title: '入驻歌手',
        cat: 5001
      }]
  },
  {
    id: 2,
    fatherText: '华语',
    sonText:
      [{
        id: 21,
        title: '华语男歌手',
        cat: 1001,
        type: 1,
        area: 7,
      },
      {
        id: 22,
        title: '华语女歌手',
        cat: 1002,
        type: 2,
        area: 7,
      }, {
        id: 23,
        title: '华语组合/乐队',
        cat: 1003,
        type: 3,
        area: 7,
      },]
  },
  {
    id: 3,
    fatherText: '欧美',
    sonText:
      [{
        id: 44,
        title: '欧美男歌手',
        cat: 2001,
        type: 1,
        area: 96,
      },
      {
        id: 45,
        title: '欧美女歌手',
        cat: 2002,
        type: 2,
        area: 96,
      }, {
        id: 46,
        title: '欧美组合/乐队',
        cat: 2003,
        type: 3,
        area: 96,
      }]
  },
  {
    id: 4,
    fatherText: '日本',
    sonText:
      [{
        id: 56,
        title: '日本男歌手',
        cat: 6001,
        type: 1,
        area: 8,
      },
      {
        id: 57,
        title: '日本女歌手',
        cat: 6002,
        type: 2,
        area: 8,
      }, {
        id: 58,
        title: '日本组合/乐队',
        cat: 6003,
        type: 3,
        area: 8,
      }]
  },
  {
    id: 5,
    fatherText: '韩国',
    sonText:
      [{
        id: 68,
        title: '韩国男歌手',
        cat: 7001,
        type: 1,
        area: 16,
      },
      {
        id: 69,
        title: '韩国女歌手',
        cat: 7002,
        type: 2,
        area: 16,
      }, {
        id: 70,
        title: '韩国组合/乐队',
        cat: 7003,
        type: 3,
        area: 16,
      }]
  },
  {
    id: 6,
    fatherText: '其他',
    sonText:
      [{
        id: 71,
        title: '其他男歌手',
        cat: 4001,
        type: 1,
        area: 0,
      },
      {
        id: 72,
        title: '其他女歌手',
        cat: 4002,
        type: 2,
        area: 0,
      }, {
        id: 73,
        title: '其他组合/乐队',
        cat: 4003,
        type: 3,
        area: 0,
      }]
  },
])
const menuClick = async (e: any, item: any) => {
  // console.log(item.cat);
  let cat = null
  let type = null
  let area = null
  if (item.cat) {
    cat = item.cat
  }
  if (item.type) {
    type = item.type
  }
  if (item.area) {
    area = item.area
  }
  catData.value = cat
  typeData.value = type
  areaData.value = area
  singerData.value = []
  // 重置页数
  pageNum.value = 1
  // 重置筛选
  radio1.value = '-1'
  getArtistListData(cat, type, area)
}
// radio选中事件
const handleChangeRadio = (value: string) => {
  // console.log(radio1.value);
  singerData.value = []
  // 重置页数
  pageNum.value = 1
  // console.log(catData.value, typeData.value, areaData.value);
  
  getArtistListData(catData.value, typeData.value, areaData.value)
}
// 获取歌手列表数据
const getArtistListData = async (cat: number | null, type: number | null, area: number | null) => {
  let params = {
    cat,
    type,
    area,
    limit: limit.value,
    offset: (pageNum.value - 1) * limit.value,
    initial: radio1.value
  }
  try {
    loading.value = true
    const res: any = await getArtistList(params)
    res.artists.forEach((item: any) => {
      singerData.value.push(item)
    })
    showload.value = res.more
  } finally {
    loading.value = false
  }
}
const handleClickLoadMore = () => {
  pageNum.value++
  getArtistListData(catData.value, typeData.value, areaData.value)
}
const scrollbottom = () => {
  let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  let clientHeight = document.documentElement.clientHeight;
  let scrollHeight = document.documentElement.scrollHeight;
  if (scrollTop + clientHeight >= scrollHeight) {
    console.log("滚动到底部了")
  }
}
onMounted(() => {
  getArtistListData(leftMenu[0].sonText[0].cat, leftMenu[0].sonText[0].type, leftMenu[0].sonText[0].area)
  window.addEventListener('scroll', scrollbottom);  //页面加载时监听滚动事件
})
onUnmounted(() => {
  window.removeEventListener('scroll', scrollbottom);  //页面离开后销毁监听事件
})
</script>
<style lang="scss" scoped>
.artist_list_contaner {
  margin-top: 20px;

  .right_artist_container {
    .singer_wrapper {

      .desc_title {
        color: #333;
        font-size: 24px;
        padding-bottom: 10px;
        border-bottom: 2px solid #409eff;
      }

      .filter_wrap {
        display: flex;
        align-items: center;
        margin: 20px 0;
        flex-wrap: wrap;

        span {
          margin-right: 20px;
          font-size: 14px;
          font-weight: 700;
          margin-top: 10px;
          margin-bottom: 10px;
          // min-width: 30px;
        }
      }

      .singer_item {
        .top_img {
          width: 100%;
          height: 200px;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .bottom_info {
          font-size: 12px;
          margin-top: 10px;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
  }
}

:deep(.el-menu-item.is-active) {
  background: #169af3;
  color: #fff;
}
</style>
